<template>
  <el-select v-model="selectedValue" :placeholder="placeholder" clearable>
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script setup lang="ts">
  import { useDictStore } from '@/stores/dictStore'

  const props = defineProps({
    code: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: '请选择'
    }
  })

  const emit = defineEmits(['update:modelValue'])
  const dictStore = useDictStore()
  const selectedValue = ref('')
  const options = ref([])

  onMounted(async () => {
    options.value = await dictStore.getDict(props.code)
  })

  watch(selectedValue, (newValue: string) => {
    emit('update:modelValue', newValue)
  })
</script>
